<template>
  <el-container>
    <el-main>
      <!-- 头部 -->
      <div class="header">
        <el-row class="header-bar">
          <el-text class="mx-1" size="large">材料采购申请</el-text>
        </el-row>
      </div>

      <!-- 材料采购申请表格 -->
      <el-table :data="purchases" style="width: 100%">
        <el-table-column prop="purchaseId" label="采购编号"></el-table-column>
        <el-table-column prop="materialName" label="材料名称"></el-table-column>
        <el-table-column prop="materialPrice" label="材料价格"></el-table-column>
        <el-table-column prop="purchaseQuantity" label="采购数量"></el-table-column>
        <el-table-column prop="requestTime" label="申请时间" :formatter="formatDate"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="agreePurchase(scope.row)">同意</el-button>
            <el-button type="danger" size="small" @click="rejectPurchase(scope.row)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 最近七天同意的申请记录表格 -->
      <h3 style="margin-top: 20px;">最近七天的申请记录</h3>
      <el-table :data="recentAgreedPurchases" style="width: 100%; margin-top: 10px;">
        <el-table-column prop="purchaseId" label="采购编号"></el-table-column>
        <el-table-column prop="materialName" label="材料名称"></el-table-column>
        <el-table-column prop="materialPrice" label="材料价格"></el-table-column>
        <el-table-column prop="purchaseQuantity" label="采购数量"></el-table-column>
        <el-table-column prop="agreedTime" label="操作时间" :formatter="formatDate"></el-table-column>
        <el-table-column prop="agreed" label="状态"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 定义采购申请数据的引用
const purchases = ref([]);
const recentAgreedPurchases = ref([]);

// 格式化日期
const formatDate = (row, column, cellValue) => {
  if (!cellValue) return '';
  const date = new Date(cellValue);
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
};

// 获取采购申请数据
const fetchPurchases = async () => {
  try {
    const response = await axios.get('http://localhost:8080/mp/list');
    purchases.value = response.data;
  } catch (error) {
    console.error('获取采购申请时出错:', error);
  }
};

// 获取最近七天的申请记录
const fetchRecentAgreedPurchases = async () => {
  try {
    const response = await axios.get('http://localhost:8080/mp/recent');
    recentAgreedPurchases.value = response.data;
  } catch (error) {
    console.error('获取最近七天的申请记录时出错:', error);
  }
};

// 同意采购申请
const agreePurchase = async (purchase) => {
  try {
    const response = await axios.post('http://localhost:8080/mp/agree', purchase);
    if (response.data) {
      fetchPurchases(); // 更新列表
      fetchRecentAgreedPurchases();
    }
  } catch (error) {
    console.error('同意采购时出错:', error);
  }
};

// 拒绝采购申请
const rejectPurchase = async (purchase) => {
  try {
    const response = await axios.post('http://localhost:8080/mp/reject', purchase);
    if (response.data) {
      fetchPurchases(); // 更新列表
      fetchRecentAgreedPurchases(); // 更新最近七天同意的记录列表
    }
  } catch (error) {
    console.error('拒绝采购时出错:', error);
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchPurchases();
  fetchRecentAgreedPurchases();
});
</script>

<style scoped>
.header {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  z-index: 1000;
}

.el-main {
  padding: 20px;
  margin-left: 20px;
}

.el-table {
  width: 100%;
}
</style>
